<template>
	<div class="layout-padding">
	  <div style="display: flex;">
		<div class='card'>
		  <div class='card-1'>
			 <avue-count-up class='n-num'
							:end="(this.statusData.planStatus.beginAmount + this.statusData.planStatus.endAmount) || 0"></avue-count-up>
			<span>巡检计划</span>
		  </div>
		  <div class='card-bottom'>
			<div>
			  <span class='circle-1'><svg t='1686539634080' class='icon' viewBox='0 0 1024 1024' version='1.1'
										  xmlns='http://www.w3.org/2000/svg' p-id='5308' width='20' height='20'><path
				  d='M859.497 294.663l55.578-228.627-228.879 55.322 58.002 57.997L523.43 400.144l-93.808-93.797-322.03 322.085 61.378 61.388v-0.04l260.652-260.676 93.808 93.798 282.147-282.173 53.92 53.934zM179.409 739.717h115.733v210.227H179.409V739.717zM371.091 634.602h115.733v315.36H371.091v-315.36zM570.005 528.01h115.723v421.942H570.005V528.01zM763.474 424.36H879.24v525.592H763.474V424.36z'
				  fill='#d49eff' p-id='5309'></path></svg></span>
			  <span>计划状态</span>
			</div>
			<div>
			  <span>启用: <span style='color: #3ba7e5'>{{ this.statusData.planStatus.beginAmount }}</span></span>
			  <span>停用: <span style='color:red;'>{{ this.statusData.planStatus.endAmount }}</span></span>
			</div>
		  </div>
		</div>
		<div class='card'>
		  <div class='card-2'>
			<avue-count-up class='n-num' :end="inspectionStatusSum"></avue-count-up>
			<span>巡检任务</span>
		  </div>
		  <div class='card-bottom'>
			<div class='mission'>
			  <div> <span class='circle-2'>
				<svg t='1686539836689' class='icon' viewBox='0 0 1024 1024' version='1.1'
					 xmlns='http://www.w3.org/2000/svg' p-id='8266' width='16' height='16'><path
					d='M109.714286 73.142857c-21.942857 0-36.571429 14.628571-36.571429 36.571429v804.571428c0 21.942857 14.628571 36.571429 36.571429 36.571429h804.571428c21.942857 0 36.571429-14.628571 36.571429-36.571429v-804.571428c0-21.942857-14.628571-36.571429-36.571429-36.571429h-804.571428z m0-73.142857h804.571428c58.514286 0 109.714286 51.2 109.714286 109.714286v804.571428c0 58.514286-51.2 109.714286-109.714286 109.714286h-804.571428C51.2 1024 0 972.8 0 914.285714v-804.571428C0 51.2 51.2 0 109.714286 0z m438.857143 292.571429h219.428571c21.942857 0 36.571429 14.628571 36.571429 36.571428s-14.628571 36.571429-36.571429 36.571429h-219.428571c-21.942857 0-36.571429-14.628571-36.571429-36.571429s14.628571-36.571429 36.571429-36.571428z m-219.428572 438.857142c21.942857 0 36.571429-14.628571 36.571429-36.571428S351.085714 658.285714 329.142857 658.285714s-36.571429 14.628571-36.571428 36.571429 14.628571 36.571429 36.571428 36.571428z m0 73.142858C270.628571 804.571429 219.428571 753.371429 219.428571 694.857143S270.628571 585.142857 329.142857 585.142857 438.857143 636.342857 438.857143 694.857143 387.657143 804.571429 329.142857 804.571429z m-7.314286-446.171429L241.371429 277.942857c-14.628571-14.628571-36.571429-14.628571-51.2 0-14.628571 14.628571-14.628571 36.571429 0 51.2L292.571429 431.542857c7.314286 7.314286 21.942857 14.628571 29.257142 14.628572s21.942857 0 29.257143-7.314286l153.6-153.6c14.628571-14.628571 14.628571-36.571429 0-51.2-14.628571-14.628571-36.571429-14.628571-51.2 0L321.828571 358.4zM548.571429 658.285714h219.428571c21.942857 0 36.571429 14.628571 36.571429 36.571429s-14.628571 36.571429-36.571429 36.571428h-219.428571c-21.942857 0-36.571429-14.628571-36.571429-36.571428s14.628571-36.571429 36.571429-36.571429z'
					p-id='8267' fill='#82efe8'></path></svg>
			  </span>
				<span>任务状态</span>
			  </div>
			  <span>已逾期: <span style='color: red'>{{ this.statusData.taskStatus.overdueAmount }}</span></span>
			</div>
			<div>
			  <span>未开始: <span style='color: #f8987a'>{{ this.statusData.taskStatus.hasAssignAmount }}</span></span>
			  <span>待申领: <span style='color:#fdb24d;'>{{ this.statusData.taskStatus.stayAssignAmount }}</span></span>
			  <span>执行中: <span style='color:#39a5e4;'>{{ this.statusData.taskStatus.beginAmount }}</span></span>
			  <span>已结束: <span style='color:#4ad3b5;'>{{ this.statusData.taskStatus.endAmount }}</span></span>
			</div>
		  </div>
		</div>
		<div class='card'>
		  <div class='card-3'>
			<avue-count-up class='n-num'
						   :end="this.sum([this.statusData.inspectionStatus.normalSize, this.statusData.inspectionStatus.exceptionSize]) || 0"></avue-count-up>
			<span>巡检记录</span>
		  </div>
		  <div class='card-bottom'>
			<div>
			  <span class='circle-3'><svg t='1686539909362' class='icon' viewBox='0 0 1024 1024' version='1.1'
										  xmlns='http://www.w3.org/2000/svg' p-id='9398' width='16' height='16'><path
				  d='M810.7 138.7v746.7H213.3V138.7h597.4m0-74.7H213.3c-41.2 0-74.7 33.4-74.7 74.7v746.7c0 41.2 33.4 74.7 74.7 74.7h597.3c41.2 0 74.7-33.4 74.7-74.7V138.7c0-41.3-33.4-74.7-74.6-74.7z'
				  p-id='9399' fill='#75bafa'></path><path
				  d='M586.7 549.3H325.3c-20.6 0-37.3-16.7-37.3-37.3 0-20.6 16.7-37.3 37.3-37.3h261.3c20.6 0 37.3 16.7 37.3 37.3 0.1 20.6-16.6 37.3-37.2 37.3zM698.7 736H325.3c-20.6 0-37.3-16.7-37.3-37.3 0-20.6 16.7-37.3 37.3-37.3h373.3c20.6 0 37.3 16.7 37.3 37.3 0.1 20.6-16.6 37.3-37.2 37.3z'
				  p-id='9400' fill='#75bafa'></path><path
				  d='M325.3 325.3m-37.3 0a37.3 37.3 0 1 0 74.6 0 37.3 37.3 0 1 0-74.6 0Z' p-id='9401'
				  fill='#75bafa'></path><path
				  d='M512 325.3m-37.3 0a37.3 37.3 0 1 0 74.6 0 37.3 37.3 0 1 0-74.6 0Z' p-id='9402' fill='#75bafa'></path><path
				  d='M698.7 325.3m-37.3 0a37.3 37.3 0 1 0 74.6 0 37.3 37.3 0 1 0-74.6 0Z' p-id='9403'
				  fill='#75bafa'></path></svg></span>
			  <span>记录状态</span>
			</div>
			<div>
			  <span>正常: <span style='color: #3ba7e5'>{{ this.statusData.inspectionStatus.normalSize }}</span></span>
			  <span>异常: <span style='color:red;'>{{ this.statusData.inspectionStatus.exceptionSize }}</span></span>
			</div>
		  </div>
		</div>
		<div class='card'>
		  <div class='card-4'>
			<avue-count-up class='n-num'
						   :end="this.sum([this.statusData.inspectionObject.regionSize, this.statusData.inspectionObject.equipmentSize]) || 0"></avue-count-up>
			<span>巡检对象</span>
		  </div>
		  <div class='card-bottom'>
			<div>
			  <span class='circle-4'><svg t='1686539993481' class='icon' viewBox='0 0 1024 1024' version='1.1'
										  xmlns='http://www.w3.org/2000/svg' p-id='11386' width='16' height='16'><path
				  d='M208 208v608h201V208H208z m-80-64c0-8.837 7.163-16 16-16h329c8.837 0 16 7.163 16 16v736c0 8.837-7.163 16-16 16H144c-8.837 0-16-7.163-16-16V144z'
				  fill='#fd8cb3' p-id='11387'></path><path
				  d='M236 692c0-4.418 4.15-8 9.27-8h127.46c5.12 0 9.27 3.582 9.27 8v56c0 4.418-4.15 8-9.27 8H245.27c-5.12 0-9.27-3.582-9.27-8v-56zM663 692a8 8 0 0 1 8-8h110a8 8 0 0 1 8 8v56a8 8 0 0 1-8 8H671a8 8 0 0 1-8-8v-56zM236 563c0-4.418 4.15-8 9.27-8h127.46c5.12 0 9.27 3.582 9.27 8v56c0 4.418-4.15 8-9.27 8H245.27c-5.12 0-9.27-3.582-9.27-8v-56z'
				  fill='#fd8cb3' p-id='11388'></path><path
				  d='M635 419v397h181V419H635z m-80-64c0-8.837 7.163-16 16-16h309c8.837 0 16 7.163 16 16v525c0 8.837-7.163 16-16 16H571c-8.837 0-16-7.163-16-16V355z'
				  fill='#fd8cb3' p-id='11389'></path></svg></span>
			  <span>对象类型</span>
			</div>
			<div>
			  <span>区域: <span style='color: #49d3af'>{{ this.statusData.inspectionObject.regionSize }}</span></span>
			  <span>设备: <span style='color:#33a4e4;'>{{ this.statusData.inspectionObject.equipmentSize }}</span></span>
			</div>
		  </div>
		</div>
		<div class='card'>
		  <div class='card-5'>
			<avue-count-up class='n-num' :end="this.statusData.counsel.counselSize || 0"></avue-count-up>
			<span>今日巡检人</span>
		  </div>
		  <div class='card-bottom'>
			<div>
			  <span class='circle-5'><svg t='1686540042077' class='icon' viewBox='0 0 1024 1024' version='1.1'
										  xmlns='http://www.w3.org/2000/svg' p-id='13383' width='16' height='16'><path
				  d='M1024 96c0-17.7-14.3-32-32-32H580c-2.2 0-4-1.8-4-4 0-33.1-26.9-60-60-60h-8c-33.1 0-60 26.9-60 60 0 2.2-1.8 4-4 4H32C14.3 64 0 78.3 0 96s14.3 32 32 32h24c4.4 0 8 3.6 8 8v528c0 4.4-3.6 8-8 8H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h364.1c10.2 0 17.8 9.5 15.6 19.5L360.4 986c-4.3 19.5 10.5 38 30.5 38 14.6 0 27.3-10.2 30.5-24.5l50.7-228c1-4.7 7.9-3.9 7.9 0.9v220.3c0 17.3 14 31.2 31.2 31.2h1.5c17.3 0 31.2-14 31.2-31.2V772.4c0-4.8 6.9-5.5 7.9-0.9l50.7 228c3.2 14.3 15.8 24.4 30.5 24.5h0.1c20 0 34.9-18.5 30.5-38l-51.3-230.5c-2.2-10 5.4-19.5 15.6-19.5h364c17.7 0 32-14.3 32-32s-14.3-32-32-32h-24c-4.4 0-8-3.6-8-8V136c0-4.4 3.6-8 8-8h24c17.8 0 32.1-14.3 32.1-32zM888 672H136c-4.4 0-8-3.6-8-8V136c0-4.4 3.6-8 8-8h752c4.4 0 8 3.6 8 8v528c0 4.4-3.6 8-8 8z'
				  p-id='13384' fill='#5ae879'></path><path d='M719.4 416h0.6v-16c0 5.4-0.2 10.7-0.6 16z' p-id='13385'
														   fill='#5ae879'></path><path
				  d='M512 160c-132.5 0-240 107.5-240 240s107.5 240 240 240 240-107.5 240-240-107.5-240-240-240z m32 76.8c0-5.2 4.9-9 10-7.8 31 7.5 59.4 23.4 82.5 46.5 18.9 18.9 33 41.3 41.6 65.8 1.8 5.2-2 10.7-7.6 10.7H560c-8.8 0-16-7.2-16-16v-99.2z m92.5 287.7c-34.1 34.1-79.7 52.5-128.1 51.5-44.8-0.9-87.8-19-119.7-50.5-34.1-33.5-52.8-78.4-52.6-126.2 0.2-46.5 18.7-90.9 51.6-123.8 23.1-23.1 51.6-39 82.6-46.6 5-1.2 9.8 2.6 9.8 7.8V352c0 35.3 28.7 64 64 64h134.3c4.9 0 8.6 4.3 7.9 9.1-5.4 37.5-22.6 72.1-49.8 99.4zM719.4 416c0.4-5.3 0.6-10.6 0.6-16v16h-0.6z'
				  p-id='13386' fill='#5ae879'></path><path d='M720 400v16h-0.6c0.4-5.3 0.6-10.6 0.6-16z' p-id='13387'
														   fill='#5ae879'></path></svg></span>
			  <span>巡检方式</span>
			</div>
			<div>
			  <span>现场扫码: <span style='color: #3ba7e5'>{{ this.statusData.counsel.nfcList }}</span></span>
			  <span>领取任务: <span style='color:#7cdac0;'>{{ this.statusData.counsel.CheckSheetList }}</span></span>
			</div>
		  </div>
		</div>
	</div>
	  <div class='chart-box'>
		<div style="width: 41vw; margin: 12px 0; background: #f0f0f0">
		  <div class='chart-title'>
			<div>巡检完成率</div>
			<div>
			  <span :class='{selected:selectedIndex===1}' @click='getChartList(1)'>全部</span>
			  <span :class='{selected:selectedIndex===2}' @click='getChartList(2)'>本年</span>
			  <span :class='{selected:selectedIndex===3}' @click='getChartList(3)'>本月</span>
			  <span :class='{selected:selectedIndex===4}' @click='getChartList(4)'>本周</span>
			  <span :class='{selected:selectedIndex===5}' @click='getChartList(5)'>今天</span>
			</div>
		  </div>
		  <div class='pie-box'>
			<div id='pie-chart' ref='pieChart'></div>
		  </div>
		</div>
		<div style="width: 45vw; margin: 12px 0; background: #f0f0f0">
		  <div class='chart-title'>
			<div>巡检统计</div>
			<div>
			  <span :class='{selected:statisticsIndex===1}' @click='getChartData(1)'>本年</span>
			  <span :class='{selected:statisticsIndex===2}' @click='getChartData(2)'>本月</span>
			  <span :class='{selected:statisticsIndex===3}' @click='getChartData(3)'>本周</span>
			  <span :class='{selected:statisticsIndex===4}' @click='getChartData(4)'>今天</span>
			</div>
		  </div>
		  <div class='line-box'>
			<div id='line-chart' ref='lineChart'></div>
		  </div>
		</div>
	  </div>
	  <basic-container>
		<div class='table-title'>
		  <div>【巡检员】巡检报告统计</div>
		  <div>
			<span :class='{selected:formIndex===1}' @click='getTableData(1)'>本年</span>
			<span :class='{selected:formIndex===2}' @click='getTableData(2)'>本月</span>
			<span :class='{selected:formIndex===3}' @click='getTableData(3)'>本周</span>
			<span :class='{selected:formIndex===4}' @click='getTableData(4)'>今天</span>
			<div>
			  <el-date-picker
				  value-format='YYYY-MM-DD'
				  :disabled-date='disabledDate'
				  v-model='timeValue'
				  type='daterange'
				  range-separator='至'
				  start-placeholder='开始日期'
				  end-placeholder='结束日期'
				  :clearable='false'
				  @change='changeDate'
			  >
			  </el-date-picker>
			</div>
		  </div>
		  <div>
			<el-button style='background-color: #ff7e00' type='warning' @click='exportExcel'>导出</el-button>
		  </div>
		</div>
		<div class='table-main'>
		  <el-table v-loading="loading" :data='tableData' stripe border style='width: 100%'>
			<el-table-column type="index" align='center' label='序号' width='100'/>
			<el-table-column prop='inspector' label='巡检人' width='180'/>
			<el-table-column prop='affiliatedUnit' show-overflow-tooltip label='所属单位'/>
			<el-table-column prop='inspectionNum' label='巡检计划数'/>
			<el-table-column prop='inspectionAreasNum' label='巡检区域数'/>
			<el-table-column prop='inspectionDevicesNum' label='巡检设备数'/>
			<el-table-column prop='executedNum' label='待执行任务数'/>
			<el-table-column prop='taskCompletedNum' label='任务完成数'/>
			<el-table-column prop='taskOverdueNum' label='任务逾期数'/>
			<el-table-column prop='normalResultNum' label='巡检结果正常数'/>
			<el-table-column prop='anomaliesResultNum' label='巡检结果异常数'/>
		  </el-table>
		</div>
	  </basic-container>
	</div>
  </template>
  
  <script>
  
import echarts from '/@/util/chart';
import {
	getAllCheckStatus,
	getCheckFinishingRate,
	getCheckRepairAnalyze,
	getCheckReportStatistics,
	getCheckReportStatisticsByDate,
} from '/@/api/check/preview.js';
import { genDaysArr } from '/@/util/date';
import { Position } from '@element-plus/icons-vue';
  
export default {
	name: 'index',
	components: { Position },
	data() {
		return {
			selectedIndex: 1,
			statisticsIndex: 1,
			lineData: { normalData: [], abnormalData: [] },
			formIndex: 1,
			timeValue: '',
			statusData: { planStatus: {}, taskStatus: {}, inspectionStatus: {}, inspectionObject: {}, counsel: {} }, // 所有状态数据
			pieList: {},
			pieData: {}, // 完成率数据
			xData: [], // x轴类型
			lineList: {},
			tableData: [],
			loading: false,
			pieMapList: new Map([
				[2, 'checkThisYear'],
				[3, 'checkThisMonth'],
				[4, 'checkThisWeek'],
				[5, 'checkThisToday'],
			]),
		};
	},
	computed: {
		inspectionStatusSum() {
			return (
				this.statusData.taskStatus.hasAssignAmount +
					this.statusData.taskStatus.stayAssignAmount +
					this.statusData.taskStatus.beginAmount +
					this.statusData.taskStatus.endAmount +
					this.statusData.taskStatus.overdueAmount || 0
			);
		},
	},
	mounted() {
		this.getStatusData();
		// 获取完成率数据
		this.getChartList(1);
		this.getChartData(1);
		this.getTableData(1);
	},
	methods: {
		mapList() {
			return new Map([
				[1, 'year'],
				[2, 'month'],
				[3, 'week'],
				[4, 'today'],
			]);
		},
		// 求和
		sum(arr) {
			return arr.reduce(function (prev, curr, idx, arr) {
				return parseInt(prev) + parseInt(curr);
			});
		},
		// 获取所有状态数据
		getStatusData() {
			getAllCheckStatus().then((res) => {
				this.statusData = res.data[0];
			});
		},
		// 巡检完成率数据切换
		getChartList(val) {
			this.selectedIndex = val;
			if (val === 1) {
				getCheckFinishingRate().then((res) => {
					this.pieList = res.data[0];
					this.pieData = this.pieList.checkAll;
					this.initPieChart();
				});
			} else {
				this.pieData = this.pieList[this.pieMapList.get(val)];
				this.initPieChart();
			}
		},
		// 根据时间获取巡检统计图表数据
		getChartData(val) {
			this.statisticsIndex = val;
			if (this.statisticsIndex === 1) {
				getCheckRepairAnalyze().then((res) => {
					this.lineList = res.data[0];
					this.xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
					this.lineData.normalData = this.lineList.yearNormalList.map((item) => {
						return item?.value ?? 0;
					});
					this.lineData.abnormalData = this.lineList.yearExceptionList.map((item) => {
						return item?.value ?? 0;
					});
					this.initChart();
				});
			}
			if (this.statisticsIndex === 2) {
				this.xData = genDaysArr();
				this.lineData.normalData = genDaysArr().map((item) => {
					let obj = this.lineList.monthNormalList.find((item1) => {
						return item === item1.name;
					});
					return obj ? obj.value : 0;
				});
				this.lineData.abnormalData = genDaysArr().map((item) => {
					let obj = this.lineList.monthExceptionList.find((item1) => {
						return item === item1.name;
					});
					return obj ? obj.value : 0;
				});
				this.initChart();
			}
			if (this.statisticsIndex === 3) {
				this.xData = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
				this.lineData.normalData = this.lineList.theWeekNormalList.map((item) => {
					return item?.value ?? 0;
				});
				this.lineData.abnormalData = this.lineList.theWeekExceptionList.map((item) => {
					return item?.value ?? 0;
				});
				this.initChart();
			}
			if (this.statisticsIndex === 4) {
				this.xData = [
					'00:00',
					'01:00',
					'02:00',
					'03:00',
					'04:00',
					'05:00',
					'06:00',
					'07:00',
					'08:00',
					'09:00',
					'10:00',
					'11:00',
					'12:00',
					'13:00',
					'14:00',
					'15:00',
					'16:00',
					'17:00',
					'18:00',
					'19:00',
					'20:00',
					'21:00',
					'22:00',
					'23:00',
				];
				this.lineData.normalData = this.lineList.todayNormalList.map((item) => {
					return item?.value ?? 0;
				});
				this.lineData.abnormalData = this.lineList.todayExceptionList.map((item) => {
					return item?.value ?? 0;
				});
				this.initChart();
			}
		},
		// 获取表格数据
		getTableData(val) {
			this.loading = true;
			this.formIndex = val;
			this.timeValue = '';
			getCheckReportStatistics(this.mapList().get(this.formIndex))
				.then((res) => {
					this.tableData = res.data.inspectionInfoList;
					this.loading = false;
				})
				.catch(() => {
					this.loading = false;
				});
		},
		// 日期组件禁止选择当前日期之前的
		disabledDate(time) {
			return time.getTime() > Date.now();
		},
		// 日期选择框触发
		changeDate(time) {
			this.formIndex = 9;
			this.loading = true;
			getCheckReportStatisticsByDate({ startTime: time[0], endTime: time[1] })
				.then((res) => {
					this.tableData = res.data.inspectionInfoList;
					this.loading = false;
				})
				.catch((res) => {
					this.loading = false;
				});
		},
		// 初始化饼状图
		initPieChart() {
			//检测是否已经存在echarts实例，如果不存在，则不再去初始化
			let myChart = echarts.getInstanceByDom(this.$refs.pieChart);
			//如果为空 则正常进行渲染 反之 不再进行初始化
			if (myChart == null) {
				myChart = echarts.init(this.$refs.pieChart);
			}
			myChart.setOption({
				tooltip: {
					trigger: 'item',
				},
				legend: {
					orient: 'vertical',
					top: '5%',
					right: 'right',
				},
				color: ['#5470c6', '#fe6f6f'],
				series: [
					{
						name: '报修方式',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: true,
							formatter(param) {
								// correct the percentage
								return param.name + ' (' + param.percent + '%)';
							},
						},
						labelLine: {
							normal: {
								length: 28, //第一条线
								length2: 20, //第二条线
								lineStyle: {
									width: 1, // 线条的宽度
									color: '#999', //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
								},
							},
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 20,
								fontWeight: 'bold',
							},
						},
						data: [
							{ value: this.pieData.accomplish, name: '完成' },
							{ value: this.pieData.unfinished, name: '未完成' },
						],
					},
				],
			});
		},
		// 初始化折线图
		initChart() {
			//检测是否已经存在echarts实例，如果不存在，则不再去初始化
			let myChart = echarts.getInstanceByDom(this.$refs.lineChart);
			//如果为空 则正常进行渲染 反之 不再进行初始化
			if (myChart == null) {
				myChart = echarts.init(this.$refs.lineChart);
			}
			myChart.setOption({
				title: {
					left: 'center',
					text: '报修趋势分析',
				},
				color: ['#1aad19', '#ff0000'],
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					data: ['正常', '异常'],
					left: 'left',
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: this.xData,
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						name: '正常',
						type: 'line',
						smooth: true,
						data: this.lineData.normalData,
					},
					{
						name: '异常',
						type: 'line',
						smooth: true,
						data: this.lineData.abnormalData,
					},
				],
			});
		},
		exportExcel() {
			if (this.formIndex === 9) {
				this.downBlobFile('/om/omicheckhome/getexport/' + this.timeValue[0] + '/' + this.timeValue[1], {}, '巡检报告统计.xlsx');
			} else {
				this.downBlobFile('/om/omicheckhome/export/' + this.mapList().get(this.formIndex), {}, '巡检报告统计.xlsx');
			}
		},
	},
};
  </script>
  
  <style lang="scss" scoped>
:deep(.el-card__body) {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.card:nth-child(2),
.card:nth-child(3){
	margin-right: 15px;
}
.card:nth-child(1){
	margin-right: 15px;
}
.card:nth-child(5){
	margin-left: 15px;
}
.card {
	width: 20%;
	& > div:nth-child(1) {
		display: flex;
		flex-direction: column;
		height: 70px;
		color: #ffffff;
		font-size: 17px;
		padding-left: 10px;

		& > span:nth-child(1) {
			font-size: 32px;
		}
	}

	.card-bottom {
		border: 1px solid #ccc;
		border-top: none;
		padding: 13px 10px 10px 10px;

		& > div:nth-child(1) {
			font-size: 15px;
			margin-bottom: 13px;
			display: flex;
			justify-content: start;
			align-items: center;

			& > span:first-child {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				margin-right: 10px;
			}
		}

		& > div:nth-child(2) {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size: 13px;
			color: #676a6c;
			height: 50px;

			& > span {
				display: inline-block;
				width: 50%;
			}

			& > span:nth-child(2n) {
				text-align: right;
			}
		}
	}
}

.mission {
	display: flex;
	justify-content: space-between !important;

	div {
		display: flex;
		align-items: center;

		& > span:first-child {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}
	}
}

.card-1 {
	background-color: #f8997b;
}

.circle-1 {
	background-color: #eee2fa;
}

.card-2 {
	background-color: #3ba7e5;
}

.circle-2 {
	background-color: #dcf5f4;
}

.card-3 {
	background-color: #4dd4b3;
}

.circle-3 {
	background-color: #dbecfc;
}

.card-4 {
	background-color: #ff797f;
}

.circle-4 {
	background-color: #fedee9;
}

.card-5 {
	background-color: #fdb348;
}

.circle-5 {
	background-color: #cef2d8;
}

//图表区域
.chart-box {
	display: flex;
	justify-content: space-between;

	& > div:nth-child(1) {
		width: 40%;
		padding: 8px 5px 8px 20px;
	}

	& > div:nth-child(2) {
		width: 60%;
		padding: 8px 20px 8px 5px;
	}

	& > div:nth-child(1) {
		padding-top: 8px;
	}

	.chart-title {
		width: 100%;
		font-size: 16px;
		color: #000;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f8f8f8;

		& > div:nth-child(2) {
			span {
				font-size: 13px;
				position: relative;
				padding: 0 6px;
				cursor: pointer;
				color: #676a6c;

				&::before {
					position: absolute;
					content: '|';
					font-size: 13px;
					right: -1px;
					top: 0px;
					transform: scale(0.8);
					-moz-transform: scale(0.8);
					-webkit-transform: scale(0.8);
					-o-transform: scale(0.8);
					color: #e6e6e6;
				}
			}

			.selected {
				color: #ff7e00;
			}
		}
	}
}

#line-chart {
	height: 250px;
}

#pie-chart {
	height: 250px;
}

.line-box {
	width: 100%;
	height: 250px;
	padding: 8px;
}

.pie-box {
	width: 100%;
	height: 250px;
	padding: 8px;
}

:deep(.el-card__body) {
	padding: 10px;
}

//底部表格区域
.table-title {
	position: relative;
	width: 100%;
	font-size: 18px;
	color: #000;
	display: flex;
	justify-content: space-between;
	align-items: center;

	& > div:nth-child(2) {
		display: flex;
		position: absolute;
		left: 300px;

		span {
			font-size: 15px;
			position: relative;
			padding: 4px 6px;
			cursor: pointer;
			color: #676a6c;
			border: 1px solid #f2f2f2;
			margin-right: 10px;
			transition: all 0.4s;
		}

		span:hover {
			background-color: #ff7e00;
			color: #fff;
		}

		.selected {
			color: #ffffff;
			background-color: #ff7e00;
		}
	}
}

.table-main {
	width: 100%;
	margin-top: 5px;
}

:deep(.el-table th.el-table__cell) {
	background-color: #eaf7f0;
}
</style>